<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="../assets/icon/love-story.ico" />
    <link rel="stylesheet" href="../css/common.css" />
    <title>彼此</title>
    <style>
      a {
        text-decoration: none;
      }

      .box {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: white;
        gap: 64px;
      }

      .menus {
        display: flex;
        gap: 16px;
      }

      .content {
        color: #f20044;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="menus">
        <a style="color: inherit" class="item" href="./blossom.html">
          共赏🌼
        </a>
        <a style="color: inherit" class="item" href="./gllery.html">印象📸</a>
        <a class="item">Chapter 3</a>
        <a class="item">Chapter 4</a>
      </div>
      <div class="content">
        📅我们已经在一起<span id="currentRef"></span>天啦！
      </div>
      <audio id="simpleLoveRef" controls autoplay loop>
        <source src="../assets/audio/love-story.mp3" type="audio/mpeg" />
      </audio>
    </div>
    <script>
      var start = new Date("2024-03-02");
      var current = Date.now();

      var diffMilliseconds = Math.abs(current - start);
      var diffDays = Math.floor(diffMilliseconds / (1000 * 60 * 60 * 24));
      console.log(diffDays); // 输出相差的天数

      let currentRef = document.querySelector("#currentRef");
      currentRef.innerHTML = diffDays;
    </script>
  </body>
</html>
